<template>
  <div class="my-container">
    <div>
      <AmyQueryDate/>
    </div>
    <div class="my-table">
      <table>
        <thead>
        <tr>
          <template v-for="(name, index) in xyHeader" :key="index">
            <th>{{name}}</th>
          </template>
        </tr>
        </thead>
        <tbody>
        <template v-for="(list, index) in xyData" :key="index">
          <tr>
            <template v-for="(item, i) in list" :key="i">
              <td>{{item.value}}</td>
            </template>
          </tr>
        </template>
        </tbody>
      </table>
    </div>
    <div class="q-ma-md">
      <AmyPagination :page-msg="myPagination" @update="refreshTableAry"/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onMounted, PropType, watch } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem } from 'stores/editorModels';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { isObjectEmpty } from 'src/util/utils';
import { CReportTable, ReportItemStruct } from 'components/views/report/reportViewModel';
import AmyQueryDate from 'components/basic/AmyQueryDate.vue';
import AmyPagination from 'components/basic/AmyPagination.vue';

export default defineComponent({
  name: 'ViewReportTable',
  components: {
    AmyQueryDate,
    AmyPagination
  },
  props: {
    detail: {
      type: Object as PropType<CGraphEntity>,
      default: {} as CGraphEntity
    },

    dynamicData: {
      type: Array as PropType<CVariableDataItem[][]>,
      default: () => {
        return [] as CVariableDataItem[][]
      }
    }
  },
  setup (props, context) {
    // 响应数据解构
    const {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //分页信息
    let myPagination = ref({
      pageNum: 1,
      pageSize: 20,
      total: 30
    });

    //响应数据
    let param = ref<CReportTable>({
      title: ''
    })

    //表头部分
    let xyHeader = ref<string[]>(['温度', '压力', '液位']);

    //数据部分
    let xyData = ref<CDynamicDataItem[][]>([
      [
        { vid: 1, name: '温度', value: 10 },
        { vid: 2, name: '压力', value: 20 },
        { vid: 3, name: '液位', value: 450 }
      ],
      [
        { vid: 1, name: '温度', value: 10.5 },
        { vid: 2, name: '压力', value: 21.2 },
        { vid: 3, name: '液位', value: 456 }
      ]
    ]);

    //属性更新
    const configProperty = () => {
      //判断是否传递参数
      if (isObjectEmpty(detail.value)) {
        showMessage('组件传递属性及数据出错！');
        return;
      }

      //个性化属性
      if ((detail.value.propsItem) &&
        (detail.value.propsItem.length === ReportItemStruct.REPORT_TABLE_SIZE)) {
        let i = 0;
        param.value.title = detail.value.propsItem[i++].value;
      } else {
        showMessage('ReportTable 属性个数与设定值不符！');
      }

      //数据节点
      if ((detail.value.dataItem) && (detail.value.dataItem.length > 0)) {
        let arr: CDynamicDataItem[] = [];
        xyHeader.value.length = 0;
        xyData.value.length = 0;
        arr.length = 0;
        detail.value.dataItem.forEach((item) => {
          xyHeader.value.push(item.nodeValue);
          arr.push({
            vid: item.variableValue,
            name: item.variableLabel,
            value: 10.5
          });
        });
        xyData.value.push(arr);
      }
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((item, index) => {
          item.forEach((el, k) => {
            if (xyData.value[index][k].vid === el.varId) {
              xyData.value[index][k].value = el.vData;
            }
          });
        });
      }
    }

    //分页符
    const refreshTableAry = () => {

    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      //console.log('on')
      refreshDynamicData();
    }, { deep: true })

    //挂载组件
    onMounted(() => {
      init();
    });

    return {
      detail,
      myPagination,
      xyHeader,
      xyData,

      refreshTableAry
    };
  }
});
</script>

<style lang="scss" scoped>
.my-container {
  background: #ece8e8;

  .my-table {
    margin: 0px;
    width: 100%;
    background: #dfe5f5;
    table {
      border-collapse: collapse;
      text-align: center;
      th, td {
        margin: 0px;
        padding: 0px;
        border: 1px solid #818487;
        color: #666;
        height: 30px;
      }
      thead th {
        background-color: #96aef6;
        width: 250px;
      }
      tbody td {
        width: auto;
      }
      tr:nth-child(odd) {
        background: #a8a3a3;
      }
      tr:nth-child(odd) {
        background: #fffcfc;
      }
    }
  }
}

</style>
